<template>
  <div class="row">
    <div class="card" v-for="li in arrlist" :key="li.id">
      <a :href="li.html_url" target="_blank">
        <img :src="li.avatar_url" style='width: 100px' />
      </a>
      <p class="card-text">{{ li.login }}</p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'List',
  data() {
    return {
      arrlist: [],
    };
  },
  // 自定义事件gerList触发,methods中的方法会被调用
  methods: {
    GetList(val) {
      console.log(val);
      this.arrlist = val;
    },
  },
  mounted() {
    this.$bus.$on('getList', this.GetList);
  },
  // 在组件销毁前解除自定义事件
  beforeDestroy() {
    this.$bus.$off('getList');
  },
};
</script>

<style scoped>
.card {
  float: left;
  width: 33.333%;
  padding: 0.75rem;
  margin-bottom: 2rem;
  border: 1px solid #efefef;
  text-align: center;
}

.card > img {
  margin-bottom: 0.75rem;
  border-radius: 100px;
}

.card-text {
  font-size: 85%;
}
</style>